// App组件被称为主组件，也可以称其为应用组件
import React, { Component } from 'react';
import PropTypes from 'prop-types'; //可以控制接收的属性类型

//1.
export class App extends React.Component {
    static propTypes = {
        userName: PropTypes.string,// 类型必须是字符串
        age:PropTypes.number.isRequired // 类型必须是数字，且不能为undefined
    }
    static defaultProps = {
        age:100
    }

    render() {
        return (
            <div>
                <h3>App</h3>
                <p>userName:{this.props.userName}</p>
                <p>age:{ this.props.age}</p>
            </div>
            )
    }
}


//2.
export class App2 extends Component{
    render() {
        return (
            <div>
                App2
            </div>
            )
    }
}


//3.先定义再导出
class App3 extends Component{
    render() {
        return (
                <div>App3</div>
            )
    }
}

class App4 extends Component {
    render() {
        return (
                <div>App4</div>
            )
    }
}

export {
    App3,App4
}


//4.export default  默认暴露
/* class App5 extends Component{
    render() {
        return (
            <div>
                App5
            </div>
            )

    }
}

export default App5; */

export default class App5 extends Component{
    render() {
        return (
                <div>App5</div>
            )
    }
}